import React, { useEffect, useMemo, useState } from 'react';
import { Tabs } from 'antd';
import loadable from '@loadable/component';

import styles from './index.module.scss';

const Content = loadable(() => import('./Content'));

const WorkDetailTabs = (props) => {
  const tabItems = [
    { key: '1', label: '官谷' },
    { key: '2', label: '饭制' },
  ];
  const initState = () => ({
    nature: tabItems[0]?.key || '1',
  });
  const [state, setState] = useState(initState);

  const getTabItems = () => {
    return tabItems.map(item => {
      return {
        ...item,
        children: (
          <div style={{height: document.body.clientHeight - 90 - 56, overflow:'hidden'}}>
            <Content nature={state.nature} type={props.type || 'work'}/>
          </div>
        ),
      };
    })
  };
  

  // 切换谷子性质，官方/饭制
  const changeNature = key => {
    setState(s => ({ ...s, nature: key }));
  };

  return (
    <div className={styles['container']} >
        <Tabs
          activeKey={state.nature}
          items={getTabItems()}
          onChange={changeNature}
          tabBarStyle={{border:0,margin:0,padding:'0 12px'}}
        />
    </div>
  );
};

export default WorkDetailTabs;